<script lang="ts">
import Vue from 'vue'
import NavBar from "@/components/nav-bar/nav-bar.vue";
import {getCanPaper} from "@/utils/utils";
import {updatePaperPrice} from "@/services/store/storeSettings";
import tips from "@/utils/tips";
import {PrinterItem} from "@/types/store/printer-list";

export default Vue.extend({
  name: "paper_price_setting",
  components: {NavBar},
  data() {
    return {
      paperPrice: {
        a4_color_price: "0.00",
        a4_black_white_price: "0.00",
        a4_double_color_price: "0.00",
        a4_double_black_white_price: "0.00",

        a3_color_price: "0.00",
        a3_black_white_price: "0.00",
        a3_double_color_price: "0.00",
        a3_double_black_white_price: "0.00",
      } as PrinterItem,
      printer_id: 0,
      supports_color: 0,
      canA3: false,
    }
  },
  computed: {
    lang() {
      return this.$t('storePages.paperPriceSettings')
    },
  },
  onLoad(query?: AnyObject) {
    const printerData = JSON.parse(decodeURIComponent(query.printer));
    const {id, paper_types_supported, supports_color} = printerData;
    this.paperPrice = printerData; // 如果 paperPrice 需要整个对象，这里可以直接赋值
    console.log(this.paperPrice);

    this.canA3 = getCanPaper(paper_types_supported, 'A3');
    this.printer_id = id;
    this.supports_color = supports_color;

  },
  methods: {
    getCanPaper,
    async submit() {
      const {
        a4_color_price,
        a4_black_white_price,
        a4_double_color_price,
        a4_double_black_white_price,

        a3_color_price,
        a3_black_white_price,
        a3_double_color_price,
        a3_double_black_white_price,
      } = this.paperPrice

      let data = this.paperPrice
      data.a4_image_color_price = a4_color_price
      data.a4_image_black_white_price = a4_black_white_price
      data.a4_double_image_color_price = a4_double_color_price
      data.a4_double_image_black_white_price = a4_double_black_white_price
      data.a3_image_color_price = a3_color_price
      data.a3_image_black_white_price = a3_black_white_price
      data.a3_double_image_color_price = a3_double_color_price
      data.a3_double_image_black_white_price = a3_double_black_white_price

      console.log("data-=-=", data)
      const updateRes = await updatePaperPrice(this.printer_id, data)
      if (updateRes.code === 200) {
        uni.navigateBack({delta: 2})
        tips.toast(this.lang.messages.updateSuccess, 3000)
      }
      console.log("updateRes-==-=", updateRes)

    }
  }
})
</script>

<template>
  <view>
    <nav-bar :page-title="lang.pageName"/>
    <view :class="['margin-30', locale]">
      <u-form
          :labelStyle="{fontSize: '28rpx'}"
          labelPosition="left"
          :model="paperPrice"
      >
        <!-- A4-->
        <view class="card padding-40 margin-bottom-40">
          <view class="common-title margin-bottom-20">{{ `${lang.paperSize['title']} ${lang.paperSize['a4']}` }}</view>
          <view class="flex-center wrap" style="row-gap: 30rpx">
            <!-- 单面-->
            <view class="flex-between default-text">
              <view class="type-title">{{ lang.printType['single'] }}</view>
              <view>
                <u-form-item
                    :label="lang.priceUnit['blackWhite']"
                    prop="a4_black_white_price"
                    :labelWidth="120"
                >
                  <input class="price-input" v-model="paperPrice.a4_black_white_price"/>
                </u-form-item>
                <u-form-item
                    v-if="supports_color"
                    :label="lang.priceUnit['colored']"
                    prop="a4_color_price"
                    :labelWidth="120"
                >
                  <input class="price-input" v-model="paperPrice.a4_color_price"/>
                </u-form-item>
              </view>
            </view>

            <!--双面-->
            <view class="flex-between default-text">
              <view class="type-title">{{ lang.printType['double'] }}</view>
              <view>
                <u-form-item
                    :label="lang.priceUnit['blackWhite']"
                    prop="a4_double_black_white_price"
                    :labelWidth="120"
                >
                  <input class="price-input" v-model="paperPrice.a4_double_black_white_price"/>
                </u-form-item>

                <u-form-item
                    v-if="supports_color"
                    :label="lang.priceUnit['colored']"
                    prop="a4_double_color_price"
                    :labelWidth="120"
                >
                  <input class="price-input" v-model="paperPrice.a4_double_color_price"/>
                </u-form-item>
              </view>
            </view>
          </view>
        </view>

        <!-- A3-->
        <view v-if="canA3" class="card margin-bottom-40">
          <view class="common-title margin-bottom-20">{{ `${lang.paperSize['title']} ${lang.paperSize['a3']}` }}</view>
          <view class="flex-center wrap" style="row-gap: 30rpx">
            <!-- 单面-->
            <view class="flex-between default-text">
              <view class="type-title">{{ lang.printType['single'] }}</view>
              <view>
                <u-form-item
                    :label="lang.priceUnit['blackWhite']"
                    prop="a3_black_white_price"
                    :labelWidth="120"
                >
                  <input class="price-input" v-model="paperPrice.a3_black_white_price"/>
                </u-form-item>
                <u-form-item
                    v-if="supports_color"
                    :label="lang.priceUnit['colored']"
                    prop="a3_color_price"
                    :labelWidth="120"
                >
                  <input class="price-input" v-model="paperPrice.a3_color_price"/>
                </u-form-item>
              </view>
            </view>


            <!--双面-->
            <view class="flex-between common-title">
              <view class="type-title">{{ lang.printType['double'] }}</view>
              <view>
                <u-form-item
                    :label="lang.priceUnit['blackWhite']"
                    prop="a3_double_black_white_price"
                    :labelWidth="120"
                >
                  <input class="price-input" v-model="paperPrice.a3_double_black_white_price"/>
                </u-form-item>

                <u-form-item
                    v-if="supports_color"
                    :label="lang.priceUnit['colored']"
                    prop="a3_double_color_price"
                    :labelWidth="120"
                >
                  <input class="price-input" v-model="paperPrice.a3_double_color_price"/>
                </u-form-item>
              </view>
            </view>
          </view>
        </view>
      </u-form>
      <!-- 提交-->
      <u-button type="primary" size="large" shape="circle" @click="submit" :text="lang.submit"/>
      <view style="height: 120rpx;"/>

    </view>
  </view>
</template>

<style lang="scss">
.type-title {
  width: 200rpx
}

.price-input {
  width: 160rpx;
  text-align: center;
  height: 80rpx;
  background: #f5f5f5;
  border: 1rpx solid #e0e0e0;
  border-radius: 16rpx;
  padding: 0 24rpx;
  font-size: 32rpx;

  &.price-input:focus {
    border-color: #007AFF;
    background: #fff;
  }
}
</style>